<template>
<div>
    <div >
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic  title="男女比">
                        <template slot="formatter">
                            456/2
                        </template>

                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
                        <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                        </template>
                        <template slot="suffix">
                            <i class="el-icon-s-flag" style="color: blue"></i>
                        </template>
                    </el-statistic>
                </div>

            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic :value="like ? 521 : 520" title="Feedback">
                        <template slot="suffix">
            <span @click="like = !like" class="like">
              <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
              <i class="el-icon-star-off"  v-show="!like"></i>
            </span> </template>
                    </el-statistic>
                </div>
            </el-col>
        </el-row>
    </div>

    <el-divider></el-divider>

    <el-card class="box-card jcard" >
        <div slot="header" class="clearfix">
            <span>前端技术</span>

        </div>
        <div v-for="o in web" :key="o" class="text item">
            {{ o }}
        </div>
    </el-card>
    <el-card class="box-card jcard" >
        <div slot="header" class="clearfix">
            <span>后端技术</span>

        </div>
        <div v-for="o in java" :key="o" class="text item">
            {{ o }}
        </div>
    </el-card>
</div>
</template>

<script>
    export default {
        name: "",
        data(){
            return{
                like: true,
                value1: 4154.564,
                value2: 2222,
                title: "今年的增长",
                input: "Hello Element UI!",
                web:[
                    "框架：vue",
                    "axios+vuex+vue-router",
                    "ui:element-ui"
                ],
                java:[
                    "springboot",
                    "spring+springmvc+mybatis"
                ]
            }
        }
    }
</script>

<style scoped>
.jcard{
    width: 500px;
}
.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
}
</style>
